<template>
	<view class="app">
		<view class="app-container">
			<view class="content">
				<view class="row">
					<view class="nominal">收件人</view>
					<view class="input"><input class="text-black" placeholder="请输入收件人姓名" type="text" v-model="name" /></view>
				</view>
				<view class="row">
					<view class="nominal">电话号码</view>
					<view class="input"><input class="text-black" placeholder="请输入收件人电话号码" type="text" v-model="telephone" /></view>
				</view>
				<view class="row">
					<view class="nominal">所在区域</view>
					<view class="input">
						<picker @change="pickerRegionChange" :value="currentRegionIndex" :range="regions" range-key="area_group_name">
							<view class="picker">
								<text :class="{ 'text-gray': !regions[currentRegionIndex] }">{{ regions[currentRegionIndex].area_group_name || '请选择所在区域' }}</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row">
					<view class="nominal">详细地址</view>
					<view class="input">
						<textarea placeholder-class="text-gray text-normal" v-model="address" auto-height="true" placeholder="输入详细地址"></textarea>
					</view>
				</view>
				<view class="row">
					<view class="nominal">设置默认地址</view>
					<view class="input switch"><switch color="#f06c7a" :checked="is_default" @change="isDefaultChange" /></view>
				</view>
			</view>
			<view class="save" :class="{ 'isIphoneX-class': isIphoneX }">
				<button class="cu-btn block box-shadow line-primary margin-tb-sm lg" v-if="editType == 'edit'" @tap="del">删除收货地址</button>
				<button class="cu-btn back block box-shadow bg-primary margin-tb-sm lg" @tap="save">保存地址</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { getAreaInfoList } from '@/api/user.js';
import { changeUserShippingAddress, deleteUserShippingAddress } from '@/api/community.js';
export default {
	data() {
		return {
			editType: 'edit',
			id: '',
			name: '',
			telephone: '',
			address: '',
			is_default: 0,
			area_group_id: '',
			regions: ['华南理工大学', '华南师范大学', '暨南大学', '广东白云学院'],
			currentRegionIndex: null
		};
	},
	computed: {
		...mapGetters(['isIphoneX'])
	},
	onLoad(e) {
		//获取传递过来的参数
		this.editType = e.type;
		this.getAreaInfoListEvnet().then(res => {
			if (e.type == 'edit') {
				uni.getStorage({
					key: 'address',
					success: e => {
						this.shipping_address_id = e.data.shipping_address_id;
						this.area_group_id = e.data.area_group_id;
						this.currentRegionIndex = this.regions.findIndex(v => {
							return v.area_group_id === e.data.area_group_id;
						});
						this.name = e.data.name;
						this.telephone = e.data.telephone;
						this.address = e.data.address;
						this.is_default = e.data.is_default;
					}
				});
			}
		})
	},
	methods: {
		isDefaultChange(e) {
			this.is_default = e.detail.value ? 1 : 0;
		},
		/**
		 * 获取地区信息列表
		 */
		getAreaInfoListEvnet(keyword) {
			return new Promise(resovle => {
				getAreaInfoList({
					keyword: keyword || ''
				}).then(res => {
					this.regions = res.result.showing;
					resovle(res.result.showing)
				});
			})
		},
		del() {
			uni.showModal({
				title: '删除提示',
				content: '你将删除这个收货地址',
				success: res => {
					if (res.confirm) {
						//删除
						deleteUserShippingAddress({
							shipping_address_id: this.shipping_address_id
						}).then(res => {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
							const selectAddress = uni.getStorageSync('selectAddress')
							if(this.shipping_address_id === selectAddress.shipping_address_id) {
								uni.setStorageSync('selectAddress', {})
							}
							uni.navigateBack();
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		save() {
			let data = {
				shipping_address_id: '',
				name: this.name,
				initial_name: this.name.substr(0, 1),
				telephone: this.telephone,
				area_group_id: this.area_group_id,
				address: this.address,
				is_default: this.is_default
			};
			if (this.editType == 'edit') {
				data.shipping_address_id = this.shipping_address_id;
			}
			if (!data.name) {
				uni.showToast({ title: '请输入收件人姓名', icon: 'none' });
				return;
			}
			if (!data.telephone) {
				uni.showToast({ title: '请输入收件人电话号码', icon: 'none' });
				return;
			}
			if (!data.area_group_id) {
				uni.showToast({ title: '请输入所在区域', icon: 'none' });
				return;
			}
			if (!data.address) {
				uni.showToast({ title: '请输入收件人详细地址', icon: 'none' });
				return;
			}
			uni.showLoading({
				title: '正在提交'
			});
			changeUserShippingAddress(data).then(res => {
				uni.hideLoading();
				uni.navigateBack();
			});
		},
		pickerRegionChange(e) {
			this.currentRegionIndex = e.detail.value;
			this.area_group_id = this.regions[e.detail.value].area_group_id;
		}
	}
};
</script>
<style lang="scss" scoped>
.app-container {
	position: relative;
}
.save {
	position: absolute;
	bottom: 36px;
	right: 16px;
	left: 16px;
}
.content {
	display: flex;
	flex-wrap: wrap;
	view {
		display: flex;
	}
	.row {
		width: 94%;
		margin: 0 3%;
		border-top: solid 1upx #eee;
		.nominal {
			width: 30%;
			height: 100upx;
			font-weight: 200;
			font-size: 30upx;
			align-items: center;
		}
		.input {
			width: 70%;
			padding: 20upx 0;
			align-items: center;
			font-size: 30upx;
			&.switch {
				justify-content: flex-end;
			}
			.textarea {
				margin: 20upx 0;
				min-height: 120upx;
			}
		}
		.del {
			width: 100%;
			height: 100upx;
			justify-content: center;
			align-items: center;
			font-size: 36upx;
			color: #f06c7a;
			background-color: rgba(255, 0, 0, 0.05);
			border-bottom: solid 1upx #eee;
		}
	}
}
</style>
